<template>
  <div>
    <!-- 头部 -->
    <el-row>
      <el-col :span="24">
        <el-card class="header-card">
          <div class="header">
            <span>留存大盘</span>
            <span>每分钟更新：2021-06-06 12:21:40</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 中间数据展示1 -->
    <el-row>
      <el-col :span="6">
        <el-card>
          <div class="div-show">
            <div>
              <i class="el-icon-user-solid"></i>
              <span class="num-span">3.6W</span>
              <span class="text-span">账号数量</span>
            </div>
            <div>
              <i class="el-icon-s-custom"></i>
              <span class="num-span">295W</span>
              <span class="text-span">在线人数</span>
            </div>
            <div>
              <i class="el-icon-s-data"></i>
              <span class="num-span">3.3亿</span>
              <span class="text-span">场观总数</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <div class="table">
            <div>
              <div>
                <span>第Ⅰ层级平均在线</span>
                <span>17</span>
              </div>
              <div>
                <span>第Ⅱ层级平均在线</span>
                <span>341</span>
              </div>
              <div>
                <span>第Ⅲ层级平均在线</span>
                <span>1,770</span>
              </div>
              <div>
                <span>第Ⅳ层级平均在线</span>
                <span>4,534</span>
              </div>
              <div>
                <span>第Ⅴ层级平均在线</span>
                <span>6,877</span>
              </div>
              <div>
                <span>第Ⅵ层级平均在线</span>
                <span>2.3W</span>
              </div>
            </div>
            <div>
              <div>
                <span>
                  2.6w个
                  <font class="t-font">账号</font>
                </span>
                <span>
                  69.50%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  2.6w个
                  <font class="t-font">账号</font>
                </span>
                <span>
                  69.50%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  2.6w个
                  <font class="t-font">账号</font>
                </span>
                <span>
                  69.50%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  2.6w个
                  <font class="t-font">账号</font>
                </span>
                <span>
                  69.50%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  2.6w个
                  <font class="t-font">账号</font>
                </span>
                <span>
                  69.50%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  2.6w个
                  <font class="t-font">账号</font>
                </span>
                <span>
                  69.50%
                  <font class="t-font">占总量</font>
                </span>
              </div>
            </div>
            <div>
              <div>
                <span>
                  1.1亿
                  <font class="t-font">场观流量</font>
                </span>
                <span>
                  31.59%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  1.1亿
                  <font class="t-font">场观流量</font>
                </span>
                <span>
                  31.59%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  1.1亿
                  <font class="t-font">场观流量</font>
                </span>
                <span>
                  31.59%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  1.1亿
                  <font class="t-font">场观流量</font>
                </span>
                <span>
                  31.59%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  1.1亿
                  <font class="t-font">场观流量</font>
                </span>
                <span>
                  31.59%
                  <font class="t-font">占总量</font>
                </span>
              </div>
              <div>
                <span>
                  1.1亿
                  <font class="t-font">场观流量</font>
                </span>
                <span>
                  31.59%
                  <font class="t-font">占总量</font>
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 中间数据展示2 -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <div id="main" style="width: 100%; height: 450px"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 直播销量榜 -->
    <el-row>
      <el-col :span="5">
        <el-card style="height: 835px">
          <div class="p-title">直播销量榜</div>
          <div class="z-header">
            <span>主播</span>
            <span>销售额</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
          <div class="z-content">
            <img src="../assets/imgs/1.png" alt />
            <img src="../assets/imgs/dlg.jpg" />
            <span class="z-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            <span class="z-money">3465.5W</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card style="height: 835px">
          <div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="主播地域分布图" name="first">
                <div class="map-content">
                  <div class="china-map"></div>
                  <div class="map-list">
                    <div class="age-map"></div>
                    <div class="sex-map"></div>
                    <div class="bean-map"></div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="观众地域分布图" name="second" v-if="false">
                <div class="map-content">
                  <div class="china-map"></div>
                  <div class="map-list">
                    <div class="age-map"></div>
                    <div class="sex-map"></div>
                    <div class="bean-map"></div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 三个排行榜 -->
    <el-row class="bot-content">
      <el-col :span="10">
        <el-card>
          <div class="p-title">商品排行</div>
          <div class="s-title">
            <span>排名</span>
            <span>商品信息</span>
            <span>价格</span>
            <span>销量</span>
            <span style="margin-right: 10px">销售额</span>
            <span>带货主播</span>
          </div>
          <div class="s-content">
            <div>
              <img src="../assets/imgs/1.png" alt />
            </div>
            <div class="s-con">
              <img class="s-img" src="../assets/imgs/s1.jpg" />
              <span class="s-name"
                >后天气丹花献光彩紧颜系列礼盒7后天气丹花献光彩紧颜系列礼盒7</span
              >
            </div>
            <span>1,590</span>
            <span>3,864</span>
            <span class="xse">23.3W</span>
            <div class="dh-zb">
              <img class="z-img" src="../assets/imgs/dlg.jpg" alt />
              <span class="sz-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            </div>
          </div>
          <div class="s-content">
            <div>
              <img src="../assets/imgs/1.png" alt />
            </div>
            <div class="s-con">
              <img class="s-img" src="../assets/imgs/s1.jpg" />
              <span class="s-name"
                >后天气丹花献光彩紧颜系列礼盒7后天气丹花献光彩紧颜系列礼盒7</span
              >
            </div>
            <span>1,590</span>
            <span>3,864</span>
            <span class="xse">23.3W</span>
            <div class="dh-zb">
              <img class="z-img" src="../assets/imgs/dlg.jpg" alt />
              <span class="sz-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            </div>
          </div>
          <div class="s-content">
            <div>
              <img src="../assets/imgs/1.png" alt />
            </div>
            <div class="s-con">
              <img class="s-img" src="../assets/imgs/s1.jpg" />
              <span class="s-name"
                >后天气丹花献光彩紧颜系列礼盒7后天气丹花献光彩紧颜系列礼盒7</span
              >
            </div>
            <span>1,590</span>
            <span>3,864</span>
            <span class="xse">23.3W</span>
            <div class="dh-zb">
              <img class="z-img" src="../assets/imgs/dlg.jpg" alt />
              <span class="sz-name">大狼狗郑建鹏&大狼狗郑建鹏</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card>
          <div class="p-title">品牌排行</div>
          <div class="p-header">
            <span>排名</span>
            <span>品牌</span>
            <span>销售额</span>
          </div>
          <div class="p-content">
            <div>
              <img src="../assets/imgs/1.png" alt />
            </div>
            <span>MECHREVO/机械革命</span>
            <span>16.0W</span>
          </div>
          <div class="p-content">
            <div>
              <img src="../assets/imgs/1.png" alt />
            </div>
            <span>MECHREVO/机械革命</span>
            <span>16.0W</span>
          </div>
          <div class="p-content">
            <div>
              <img src="../assets/imgs/1.png" alt />
            </div>
            <span>MECHREVO/机械革命</span>
            <span>16.0W</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card>
          <div class="p-title">品类排行</div>
          <div class="pl-header">
            <span>品类</span>
            <span>销售额</span>
          </div>
          <div class="pl-content">
            <div class="pl-name">
              <span>男装女装</span>
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                status="exception"
                :percentage="70"
              ></el-progress>
            </div>
            <span>20亿</span>
          </div>
          <div class="pl-content">
            <div class="pl-name">
              <span>男装女装</span>
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                status="exception"
                :percentage="70"
              ></el-progress>
            </div>
            <span>20亿</span>
          </div>
          <div class="pl-content">
            <div class="pl-name">
              <span>男装女装</span>
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                status="exception"
                :percentage="70"
              ></el-progress>
            </div>
            <span>20亿</span>
          </div>
          <div class="pl-content">
            <div class="pl-name">
              <span>男装女装</span>
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                status="exception"
                :percentage="70"
              ></el-progress>
            </div>
            <span>20亿</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "../js/china.js";
export default {
  data() {
    return {
      activeName: "first",
      option: {
        title: {
          text: "留存能力",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "第Ⅰ层级平均在线",
            "第Ⅱ层级平均在线",
            "第Ⅲ层级平均在线",
            "第Ⅳ层级平均在线",
            "第Ⅴ层级平均在线",
            "第Ⅵ层级平均在线",
          ],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "第Ⅰ层级平均在线" },
              { value: 310, name: "第Ⅱ层级平均在线" },
              { value: 234, name: "第Ⅲ层级平均在线" },
              { value: 135, name: "第Ⅳ层级平均在线" },
              { value: 1548, name: "第Ⅴ层级平均在线" },
              { value: 548, name: "第Ⅵ层级平均在线" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      dataList: [
        { name: "北京", value: 5 },
        { name: "天津", value: 8 },
        { name: "河北", value: 42 },
        { name: "山西", value: 42 },
        { name: "内蒙古", value: 4 },
        { name: "辽宁", value: 94 },
        { name: "吉林", value: 93 },
        { name: "黑龙江", value: 68 },
        { name: "上海", value: 91 },
        { name: "江苏", value: 32 },
        { name: "浙江", value: 99 },
        { name: "安徽", value: 72 },
        { name: "福建", value: 65 },
        { name: "江西", value: 6 },
        { name: "山东", value: 33 },
        { name: "河南", value: 20 },
        { name: "湖北", value: 79 },
        { name: "湖南", value: 59 },
        { name: "广东", value: 57 },
        { name: "广西", value: 80 },
        { name: "海南", value: 23 },
        { name: "重庆", value: 61 },
        { name: "四川", value: 67 },
        { name: "贵州", value: 85 },
        { name: "云南", value: 76 },
        { name: "西藏", value: 52 },
        { name: "陕西", value: 99 },
        { name: "甘肃", value: 38 },
        { name: "青海", value: 26 },
        { name: "宁夏", value: 62 },
        { name: "新疆", value: 95 },
        { name: "台湾", value: 2 },
        { name: "香港", value: 98 },
        { name: "澳门", value: 1 },
        { name: "南海诸岛", value: 17 }
      ], // 该数据是从服务器获取到的数据
      dataOption: {
        tooltip: {
          formatter: (params, ticket, callback) => {
            for (var index = 0; index < this.dataList.length; index++) {
              if (params.name == this.dataList[index].name) {
                params.value = this.dataList[index].value;
              }
            }
            if (isNaN(params.value)) {
              params.value = 0;
            }
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          },
        },
        visualMap: {
          min: 0,
          max: 1500,
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          inRange: {
            color: ["#e0ffff", "#006edd"],
          },
          show: false,
        },
        geo: {
          map: "china",
          roam: false,
          zoom: 1.23,
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#F3B329",//地图选中区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "主播人数",
            type: "map",
            geoIndex: 0,
            data: this.dataList //这里不知道为啥数据不显示 已经在tooltip处理了
          },
        ],
      },
      ageOption: {
        title: {
          text: "年龄分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["6-17", "25-30", "36-40"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "6-17" },
              { value: 310, name: "25-30" },
              { value: 234, name: "36-40" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      sexOption: {
        title: {
          text: "性别分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["男", "女"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "男" },
              { value: 310, name: "女" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      beanOption: {
        title: {
          text: "粉丝量分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["<10万", "10-100万", "100-500万"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "<10万" },
              { value: 310, name: "10-100万" },
              { value: 310, name: "100-500万" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    randomValue() {
      return Math.round(Math.random() * 1000);
    },
    initMain() {
      //   第一个视图
      var charMain = document.getElementById("main");
      var myChart = echarts.init(charMain);
      myChart.setOption(this.option);
      // 中国地图分布
      var chainMain = document.getElementsByClassName("china-map")[0];
      var chainChart = echarts.init(chainMain);
      chainChart.setOption(this.dataOption);
      // 其他三个视图
      var ageMain = document.getElementsByClassName("age-map")[0];
      var sexMain = document.getElementsByClassName("sex-map")[0];
      var beanMain = document.getElementsByClassName("bean-map")[0];
      var ageEcharts = echarts.init(ageMain);
      var sexEcharts = echarts.init(sexMain);
      var beanEcharts = echarts.init(beanMain);
      ageEcharts.setOption(this.ageOption);
      sexEcharts.setOption(this.sexOption);
      beanEcharts.setOption(this.beanOption);
    }
  },
  mounted() {
    this.initMain();
  },
};
</script>
<style scoped>
.header-card {
  height: 60px;
}
.header {
  display: flex;
  justify-content: space-between;
}
.header span:first-child {
  color: red;
  font-size: 18px;
  font-weight: 500;
}
.header span:last-child {
  color: #8a8e99;
  font-size: 12px;
  font-weight: 300;
}
.div-show {
  display: flex;
  justify-content: space-between;
}
.div-show div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33.33%;
  height: 250px;
  border-radius: 4px;
  color: #fff;
  margin-left: 10px;
}
.map-content {
  display: flex;
  justify-content: space-between;
}
.china-map {
  flex: 2;
  height: 760px;
  border-right: 1px solid #8e8e8e;
}
.map-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 760px;
  padding-left: 10px;
}
.map-list > div {
  height: 33.33%;
}
.div-show div:first-child {
  background: #ff80a4;
}
.div-show div:nth-child(2) {
  background: #75a7ff;
}
.div-show div:last-child {
  background: #ffb685;
}
.div-show div i {
  font-size: 50px;
  margin-top: 50px;
}
.div-show > div > .num-span {
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 5px;
}
.div-show > div > .text-span {
  font-size: 12px;
}
.table > div {
  height: 64px;
  display: flex;
  margin-bottom: 20px;
}
.table > div > div {
  width: 16.6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.table > div:first-child > div > span:first-child {
  width: 64px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.table > div:first-child > div > span:last-child {
  color: green;
  font-size: 16px;
  font-weight: 700;
}
.table > div:nth-child(2) > div > span:first-child {
  width: 61px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.table > div:nth-child(2) > div > span:last-child {
  width: 61px;
  color: #000;
  font-size: 16px;
  font-weight: 700;
}
.table > div:nth-child(3) > div > span:first-child {
  width: 52px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.table > div:nth-child(3) > div > span:last-child {
  width: 57px;
  color: #000;
  font-size: 16px;
  font-weight: 700;
}
.table .t-font {
  color: #8e8e8e;
  font-size: 12px;
}
.p-title {
  font-size: 18px;
  font-weight: 700;
  border-left: 5px solid red;
  padding-left: 5px;
}
.z-header {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.z-content {
  margin: 30px 0 10px 0;
  font-size: 14px;
  cursor: pointer;
  box-sizing: border-box;
}
/* .z-content:hover {
  padding: 10px 30px;
  background: lightsalmon;
} */
.z-content img:nth-child(2) {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  vertical-align: bottom;
  margin: 0 5px;
}
.z-name {
  display: inline-block;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.z-money {
  float: right;
  margin-top: 10px;
}
.s-content {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 10px 0;
  font-size: 12px;
  cursor: pointer;
  align-items: center;
}
.s-title {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.s-title span {
  width: 16.66%;
}
.s-title span:nth-child(2) {
  width: 40%;
}
.s-content .s-img {
  width: 30px;
  height: 30px;
}
.s-content {
  display: flex;
  justify-content: space-between;
}
.s-content > div,
.s-content > span {
  width: 16.66%;
}
.s-content > div:nth-child(2) {
  width: 40%;
}
.s-content .s-con .s-img {
  float: left;
}
.s-content .s-con .s-name {
  float: left;
}
.s-con .s-name {
  width: 80%;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
  display: -webkit-box;
}
.s-content .z-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  float: left;
}
.s-content .sz-name {
  width: 45px;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
  display: -webkit-box;
  float: left;
}
.p-header {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.p-header span:nth-child(2) {
  flex: 2;
  padding-left: 15px;
}
.p-content {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 10px 0;
  font-size: 14px;
}
.p-content span:nth-child(2) {
  flex: 2;
  padding-left: 25px;
}
.pl-header {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.pl-content {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 10px 0;
  font-size: 14px;
}
.pl-name {
  flex: 2;
  padding-right: 10px;
}
.bot-content .el-card{
  height: 800px;
}
</style>